<template>
  <div class="activity-log">
    <h3>活动记录</h3>
    <div class="activities">
      <div 
        v-for="activity in activities" 
        :key="activity._id"
        class="activity-item"
      >
        <Avatar :user="activity.user" size="small" />
        <div class="activity-content">
          <span class="username">{{ activity.user.username }}</span>
          <span class="action">{{ formatAction(activity) }}</span>
          <span class="timestamp">{{ formatTime(activity.timestamp) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import Avatar from '../../../../../client/src/components/Common/Avatar.vue';

const props = defineProps({
  activities: {
    type: Array,
    required: true
  }
});

const formatAction = (activity) => {
  const actions = {
    'card:create': '创建了卡片',
    'card:move': '移动了卡片',
    'card:update': '更新了卡片',
    'list:create': '创建了列表',
    'list:update': '更新了列表',
    'member:add': '添加了成员',
    'member:remove': '移除了成员',
    'member:role': '更新了成员权限'
  };
  
  return actions[activity.action] || activity.action;
};

const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return date.toLocaleString();
};
</script>

<style scoped>
.activity-log {
  margin-top: 16px;
}

.activities {
  margin-top: 8px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #DFE1E6;
}

.activity-content {
  margin-left: 8px;
  flex: 1;
}

.username {
  font-weight: 500;
}

.action {
  margin-left: 4px;
}

.timestamp {
  color: #5E6C84;
  font-size: 12px;
  margin-left: 8px;
}
</style> 